<template>
    <div flex class="content">
        <div class="content-left">
            <div style="">
                <p class="left-title"><span>任务详情</span></p>
                <base-form :formRow="taskFormRow" ref="taskForm" :spanNumber="24" :isFunBtn="false" :disabled="true"
                    :spanWidth="'60px'" style="padding: 0 20px;">
                </base-form>
                <el-input type="textarea" :rows="4" placeholder="双击右侧任务自动带入" v-model="textarea" disabled></el-input>
            </div>
            <div>
                <p class="left-title"><span>任务反馈</span></p>
                <el-radio-group v-model="radio" style="margin-bottom: 20px;">
                    <el-radio :label=1>完成</el-radio>
                    <el-radio :label=2>未完成</el-radio>
                </el-radio-group>
                <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 10 }" placeholder="请输入内容" v-model="feedback">
                </el-input>
            </div>
            <div style="position: absolute;right: 10px;bottom: 10px;">
                <el-button type="primary" size="small" @click="submitForm">提交反馈</el-button>
            </div>
        </div>

        <base-layout :buttonList="buttonList" :isPage="true" @onFuncBtn="onFuncBtn" style="flex:1;position: relative;"
            :showTitle="false" :defaultButtonSwitch="false" ref="layout" @pageChange="onPageChange">
            <div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
                <div class="query">
                    <el-input clearable v-model="input1" placeholder="项目名称模糊查找" @change="GetBillList">
                    </el-input>
                    <el-date-picker style="margin: 0 10px;" v-model="startDate" align="right" type="date" placeholder="开始日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                    <el-date-picker v-model="endDate" align="right" type="date" placeholder="结束日期"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>

                </div>
                <base-table :border="true" :showIndex="false" :slotrow="false" :tableHeight="tableHeight"
                    @row-class-name="tableRowClassName" :tabLoading.sync="tabLoading" :tableData="tableData"
                    :tableColumn="tableColumn" ref="tableData" @doubleClick="doubleClick">
                    <template v-slot:overDate="{ row }">
                        <span>{{ row.overDate | getDate }}</span>
                    </template>
                    <template v-slot:isOverName="{ row }">
                        <span
                            :style="{ 'color': row.isOverName == '未完成' || row.isOverName == '未反馈' ? '#ff0001' : '#1a95ff' }">
                            {{ row.isOverName }}</span>
                    </template>
                    <template v-slot:auditResult="{ row }">
                        <span :style="{ 'color': row.auditResult == '未审核' ? '#ff0001' : '#1a95ff' }">
                            {{ row.auditResult }}</span>
                    </template>
                    <template v-slot:level="{ row }">
                        <div class="color">
                            <div class="level" :class="{
                                'active1': row.level == 1,
                                'active2': row.level == 2,
                                'active3': row.level == 3
                            }">{{ row.level }} </div>
                        </div>
                    </template>
                </base-table>
            </div>
        </base-layout>
    </div>
</template>

<script>
// 组件
import baseLayout from '@/components/base/baseLayout'
import baseTable from '@/components/base/baseTable'
import baseForm from '@/components/base/baseNewForm'
import { dataDictionaryGetBillList } from "@/api/apis/dataDictionary";
import { myTaskBack, myTaskList, } from "@/api/apis/myJob";
import { GetDataSourcePerson, } from "@/api/apis/documentManagement";
import configData from './configData';
export default {
    components: {
        baseLayout, baseTable, baseForm,
    },
    data() {
        return {
            //
            buttonList: [
                { menuName: '查询', },
                { menuName: '本周', },
                { menuName: '上周', },
                { menuName: '下周', },
            ],
            pageModel: {//分页
                limit: 20, page: 1
            },
            tableColumn: configData.tableColumn,//表头
            tableData: [],//表数据
            tabLoading: false,
            //
            textarea: '',
            taskFormRow: configData.taskFormRow,
            //
            input1: "",
            startDate: "",
            endDate: '',
            billid: '',//双击行数据id
            radio: null,
            feedback: '',
        };
    },
    mounted() {
        this.init()
        this.getDates()
    },
    filters: {
        getDate(value) {
            if (!value) {
                return ''
            }
            return value.split('T')[0]
        },
    },
    methods: {
        // 页面初始化
        init() {
            this.GetBillList();


        },
        onFuncBtn(btnEven) {
            if (btnEven.menuName == "查询") {
            } else if (btnEven.menuName == "本周") {
                this.getDates()
            } else if (btnEven.menuName == "上周") {
                this.getLastWeek()
            } else if (btnEven.menuName == "下周") {
                this.getNextWeek()
            }
            this.GetBillList()
        },
        //行双击事件
        doubleClick(row) {
            this.textarea = row.content
            this.billid = row.billid
            this.$refs.taskForm.choiceAssignment(row)
        },
        tableRowClassName(obj, callback) {
            let date = new Date()
            let date1 = this.formatDate(new Date())
            // let date2 = getDate(obj.row.overDate)

            if (obj.row.isOverName == "延期完成" || obj.row.isOverName == "完成" || obj.row.isOverName == "正常完成") {
                callback('success-row')
            } else if (date > new Date(obj.row.overDate)) {
                callback('denger-row')
            } else if (date1 == new Date(obj.row.overDate)) {
                callback('warning-row')
            }
        },
        //提交
        async submitForm() {
            let data = {
                id: this.billid,
                backContent: this.feedback,
                isOver: this.radio
            }
            let res = await myTaskBack(data);
            if (res.code == 1) {
                this.$vmNews("任务反馈成功", "success");
                this.GetBillList()
                this.clear()

            }
        },
        clear() {
            this.feedback = '';
            this.textarea = '';
            this.radio = null;
            this.$refs.taskForm.resetFields();
        },
        //任务列表
        async GetBillList() {
            this.tabLoading = true;
            let params = {
                ...this.pageModel,
                Sequence: "descending",
                SequenceName: "overDate",
                projectName: this.input1,
                startDate: this.startDate,
                endDate: this.endDate
            }
            const res = await myTaskList(params);
            if (res.code == 1) {
                this.$refs.layout.setPageTotal(res.data[0]);
                this.tableData = res.data[1];
                this.tabLoading = false;
            }
        },
        // 分页
        onPageChange(model) {
            this.pageModel.page = model.page,
                this.pageModel.limit = model.limit
            this.getTableData()
        },
        getDates() {
            const today = new Date();
            // 获取当前日期的周几（0 表示周日，1 表示周一，以此类推）
            const dayOfWeek = today.getDay();
            // 计算本周的开始日期和结束日期
            const startOfThisWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek);
            const endOfThisWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() + (6 - dayOfWeek));
            this.startDate = this.formatDate(startOfThisWeek);
            this.endDate = this.formatDate(endOfThisWeek);
        },
        getLastWeek() {
            const inputDate = new Date(this.startDate);
            const previousWeekStart = new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate() - 7);
            const previousWeekEnd = new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate() - 1);
            this.startDate = this.formatDate(previousWeekStart);
            this.endDate = this.formatDate(previousWeekEnd);
        },
        getNextWeek() {
            // console.log(this.startDate);
            const inputDate = new Date(this.startDate);
            const startOfNextWeek = new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate() + 7);
            const endOfNextWeek = new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate() + 13);
            this.startDate = this.formatDate(startOfNextWeek);
            this.endDate = this.formatDate(endOfNextWeek);
            // console.log(this.formatDate(startOfNextWeek), this.formatDate(endOfNextWeek));
        },
        formatDate(value, type) {
            // 计算日期相关值
            let time = typeof value == 'number' ? new Date(value) : value;
            let Y = time.getFullYear();
            let M = time.getMonth() + 1;
            let D = time.getDate();
            // 如果传递了type的话
            if (type == undefined) {
                return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D);
            }
        },

    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100%;
    padding: 0 10px;

    .content-left {
        overflow-y: auto;
        position: relative;
        width: 25%;
        padding: 5px;
        border: 1px solid #d5d7d6;
        border-radius: 10px;
        margin: 0px 10px 10px 0;

    }

    .left-title {
        padding: 20px 10px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        color: #000;

        ::v-deep .el-form-item__label {
            font-size: 16px;
        }

        span {
            padding-left: 8px;
            border-left: 3px solid #2261F6;
        }
    }

    .query {
        display: flex;
        position: absolute;
        top: 10px;

        ::v-deep .el-input__inner {
            width: 160px;
        }
    }

    .color {
        .level {
            border-radius: 50%;
            display: inline-block;
            width: 23px;
            height: 23px;
            font-weight: 600;
        }

        .active1 {
            // border: 2px solid #e1433a;
            background: #e1433a;
            color: #fff;
        }

        .active2 {
            // border: 2px solid #FCC102;
            background: #FCC102;
            color: #fff;
        }

        .active3 {
            // border: 2px solid #1a95ff;
            background: #1a95ff;
            color: #fff;
        }
    }
}
</style>
